<template>
  <div class="page-container">
    <div class="search-pannel">

    </div>
    <div class="table-panel">
      <el-table :data="tenants" size="medium" @sort-change="onSortChange" v-loading.body="listLoading" element-loading-text="读取数据中..." 
        :default-sort="{prop: 'id', order: 'descending'}" highlight-current-row>
        <el-table-column fixed prop="id" label="#" sortable="custom" width="80">
          <template slot-scope="scope">
            {{pagination.pageNo * pagination.pageSize + scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column fixed prop="name" label="名称" sortable="custom">
          <template slot-scope="scope">
            <router-link :to="'tenant/show/' + scope.row.id">{{scope.row.name}}</router-link>
          </template>
        </el-table-column>
        <el-table-column prop="provAndCity" label="省市" sortable="custom"></el-table-column>
        <el-table-column prop="contact" label="联系人" sortable="custom" width="150"></el-table-column>
        <el-table-column prop="phone" label="手机" sortable="custom" width="150"></el-table-column>
      </el-table>
      <el-pagination style="margin-top: 20px" background layout="sizes,prev,pager,next" :total="pagination.totalItems"
        :page-sizes="[10,20,30,40,50,100]" :page-size="pagination.pageSize" v-on:size-change="onSizeChange"
        v-on:current-change="onCurrentChnage"></el-pagination>
    </div>
  </div>
</template>
<script>
import * as Tenant from '@/api/tenant'
import * as District from '@/api/district'

export default {
  data() {
    return {
      listLoading: false,
      tenants: [],
      query: { },
      pagination: { pageNo: 0, pageSize: 10, totalItems: 0, sort: 'id desc' }
    }
  },
  created() {
    this.refreshList()
  },
  methods: {
    onSizeChange(size) {
      this.pagination.pageSize = size
      this.refreshList()
    },
    onCurrentChnage(currentPage) {
      this.pagination.pageNo = currentPage - 1
      this.refreshList()
    },
    onSortChange({ column, prop, order }) {
      if (!order) {
        this.pagination.sort = undefined
      } else {
        if (prop === 'provAndCity') {
          this.pagination.sort = 'provinceId ' + order + ', cityId ' + order
        } else {
          this.pagination.sort = prop + ' ' + order
        }
      }

      this.refreshList()
    },
    refreshList() {
      setTimeout(() => this.retriveList({ ...this.query, ...this.pagination }), 500)
    },
    retriveList(query) {
      this.listLoading = true
      Tenant.getList(query).then(data => {
        data.data.forEach((e, i) => {
          e.provAndCity = null // 需要一个初始值，否则不能响应字段值变化
          District.resolveProvinceAndCity(e.provinceId, e.cityId).then(pac => {
            e.provAndCity = pac.map(d => d && d.name || '').join(', ')
          })
        })
        this.tenants = data.data
        this.listLoading = false
      }).catch(err => {
        this.$message.error(err.message || err)
        this.listLoading = false
      })

      Tenant.count().then(data => {
        this.pagination.totalItems = data.data
      }).catch(err => this.$message.error(err.message || err))
    }
  }

}
</script>
<style>

</style>